<template>
    <div class="login-container">
        <div class="loginForm">
            <!-- 头像 -->
            <div class="avatar">
                <img :src="logo" alt="">
            </div>
            <!-- 登录表单 -->
                <el-form ref="loginForm" :rules="rule" :model="form" label-width="0px" class="login">
                    <el-form-item prop="username">
                        <el-input v-model="form.username" prefix-icon="el-icon-user"></el-input>
                    </el-form-item>

                    <el-form-item prop="password">
                        <el-input v-model="form.password" prefix-icon="el-icon-goods" show-password></el-input>
                    </el-form-item>

                    <el-form-item class="button">
                        <el-button type="primary" :loading="loginLoading" @click="submit('loginForm')">登录</el-button>
                        <el-button type="info">重置</el-button>
                    </el-form-item>

                </el-form>
        </div>
    </div>
</template>

<script>
import {login} from '@/api/user'

export default {
    name: 'Login',

    components: {},

    directives: {},

    data() {
        return {
           logo: require("@/assets/logo.png"),
           loginLoading:false,
           form: { 
               username:null,
               password:null,
           },
           rule:{ 
               username:{ 
                   required:true,message:'请输入用户名',trigger:'blur'
               },
               password:{ 
                   required:true,message:'请输入密码',trigger:'blur'
               }
           },

        };
    },

    mounted() {
        
    },

    methods: {
        submit(formName) { 
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.login()        
                } else { 
                    return ;
                }
            })
        },

        login() { 
            this.loginLoading = true
            let user = this.form 

            login(user).then(res => {
                let meta = res.data.meta
                let data = res.data.data 

                if(meta.status == 200){ 
                    //登录成功
                    this.$message({ 
                        type:'success',
                        message:meta.msg,
                        duration:1500
                    })

                    window.localStorage.setItem("result",JSON.stringify(data))
                    this.$store.dispatch('updateUser',data) 
                    this.$router.push({ 
                        name:'home'
                    })
                } else { 

                    //登录失败
                     this.$message({ 
                        type:'error',
                        message:meta.msg,
                        duration:1500
                    })
                }

                this.loginLoading = false
            
            }).catch(err => { 
                this.$message({ 
                    type:'error',
                    message:'登录出错',
                    duration:1500
                })

                console.log(err)
                this.loginLoading = false
            })

        }
    },
};
</script>

<style lang="css" scoped>
    .login-container {
        background-color: rgb(43,75,107);
        height: 100%;
    }

    .loginForm {
        width: 450px;
        height: 300px;
        background: #fff;
        border-radius: 3px;
        position: absolute;
        left: 0;
        top: 13.125rem;
        right: 0;
        margin: auto;
 
    }
    .avatar {
        height: 130px;
        width: 130px;
        border: 1px solid #eee;
        border-radius: 50%;
        padding: 10px;
        box-shadow: 0 0 10px #ddd;
        margin-left: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;
    
    }
    .avatar img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #eee;
    }
    .login {
        width: 400px;
        margin: 0 auto;
        margin-top: -10%;
    }

    .button {
        display: flex;
        justify-content: flex-end;
    }
    
</style>